<template>
  <div class="accountInfo">
    <div class="account">
      <div class="account_title">专户信息</div>
    </div>
    <div>
      <a-table :columns="columns" :data-source="data">
        <div
          class="td_name"
          slot="accountVoucherName"
          slot-scope="text,record"
          @click="showPdf(record)"
        >{{ text }}</div>
      </a-table>
    </div>
    <!-- pdf对话框 -->
    <div>
      <a-modal
        v-model="visible"
        title
        @ok="handleOk"
        :footer="null"
        :maskClosable="false"
        width="1080px"
        :centered="true"
        :bodyStyle="{textAlign:'center'}"
        v-if="visible"
        key="modalpdf"
      >
        <embed v-if="visible" width="1000" height="700" :src="this.pdfUrl" type />
      </a-modal>
    </div>
  </div>
</template>

<script>
import { queryLabourOrg, getOrgSubsidiaryInfo } from '@/api/construction'
export default {
  data() {
    return {
      columns: [
        {
          title: '开户银行',
          dataIndex: 'accountBank',
          align: 'center'
        },
        {
          title: '工资专用账号',
          dataIndex: 'accountNumber',
          align: 'center'
        },
        // {
        //   title: '工资专户流水号',
        //   dataIndex: 'waterNum',
        //   align: 'center'
        // },
        {
          title: '累计发放工资（元）',
          dataIndex: 'cumulativeWage',
          align: 'center'
        },
        {
          title: '开户凭证',
          dataIndex: 'accountVoucherName',
          align: 'center',
          key: 'accountVoucherName',
          scopedSlots: { customRender: 'accountVoucherName' }
        }
      ],
      data: [
        
      ],
      visible: false,
      pdfUrl: '',
      topInfo: {}
    }
  },
  // watch: {
  //   queryData(val, oldVal) {}
  // },
  created() {this.getTopInfo()},
  mounted() {
    
  },
  props: ['queryData'],
  methods: {
    getTopInfo() {
      // console.log(111)
      let data = {
        orgId: sessionStorage.getItem('gatewayId'),
        projectId: sessionStorage.getItem('projectId')
      }
      getOrgSubsidiaryInfo(data).then((res) => {
        // console.log(res.data.data);
        
        this.topInfo = res.data.data
        this.topInfo.key=this.topInfo.id
        // this.topInfo.forEach((item,index)=>{
        //   item.key=index
        // })
        this.data.push(this.topInfo)
      })
    },
    showPdf(val) {
      // console.log(val);
      
      this.pdfUrl = val.accountVoucherUrl
      this.visible = true
    },
    handleOk(e) {
      //   console.log(e);
      this.visible = false
    }
  }
}
</script>

<style scoped>
::v-deep .ant-table-pagination.ant-pagination {
  display: none;
}
.account {
  height: 45px;
  /* border-bottom: 1px solid #ccc; */
  margin-bottom: 30px;
}
.account_title {
  width: 90px;
  height: 45px;
  font-size: 16px;
  line-height: 45px;
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
  text-align: center;
  margin-left: 30px;
}
.td_name {
  color: #1890ff;
  cursor: pointer;
}
::v-deep .ant-modal {
  width: 1080px !important;
  top: 10px;
}
::v-deep .ant-modal-body {
  padding: 40px;
  height: 780px;
}
</style>
